<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="header.jsp"></jsp:include>
    <title>疫情信息</title>
    <style type="text/css">
        #body {
            background-color: #10AEB5;
        }
    </style>
</head>
<body id="body">

<div class="container" style="background-color: white">
    <div class="row">
        <div class="col-md-12" id="myMap" style="height: 500px">
            <%--        疫情地图--%>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-12" id="myCharts" style="height: 500px">
            <%--  图表--%>
        </div>
    </div>
    <br>
    <div class="row">
        <br>
        <div class="col-md-12">
            <table class="table table-bordered table-hover table-striped">
                <thead style="background-color: #10AEB5;color: white">
                <tr>
                    <th>省份</th>
                    <th>累计确诊</th>
                    <th>累计疑似</th>
                    <th>隔离人数</th>
                    <th>死亡人数</th>
                    <th>治愈人数</th>
                </tr>
                </thead>
                <tbody id="tbody2">
                <%--     使用js循环打印列表体--%>
                </tbody>
            </table>
        </div>
    </div>


    <div class="row ">
        <div class="col-md-2">
            <a href="login.jsp">登录</a>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/Bootstrap/js/jquery-1.11.2.js"></script>
<script src="${pageContext.request.contextPath}/Bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Echarts/echarts.js"></script>
<script type="text/javascript">

    $(function () {
        //请求最新的疫情数据
        $.get("${pageContext.request.contextPath}/epidemicData/ajax/latestData", {}, function (resp) {
            if (resp.code < 0) {
                alert(resp.msg);
            } else {
                fillToTable(resp.data);
                fillToCharts(resp.data);
                fillToMap(resp.data);
            }
        }, "json");

        function fillToTable(epidemics) {
            var tbody2 = $("#tbody2");
            tbody2.empty();
            $.each(epidemics, function (index, epidemic) {
                var tr = $("<tr>");
                var td = $("<td>");
                td.html(epidemic.provinceName);
                tr.append(td);

                td = $("<td>");
                td.html(epidemic.affirmedTotal + "&nbsp;&nbsp;<span class='small' style='color: red'>+" + epidemic.affirmed + "</span>");
                tr.append(td);

                td = $("<td>");
                td.html(epidemic.suspectedTotal + "&nbsp;&nbsp;<span class='small' style='color: red'>+" + epidemic.suspected + "</span>");
                tr.append(td);

                td = $("<td>");
                td.html(epidemic.isolatedTotal + "&nbsp;&nbsp;<span class='small' style='color: red'>+" + epidemic.isolated + "</span>");
                tr.append(td);

                td = $("<td>");
                td.html(epidemic.deadTotal + "&nbsp;&nbsp;<span class='small' style='color: red'>+" + epidemic.dead + "</span>");
                tr.append(td);

                td = $("<td>");
                td.html(epidemic.curedTotal + "&nbsp;&nbsp;<span class='small' style='color: red'>+" + epidemic.cured + "</span>");
                tr.append(td);
                tbody2.append(tr);
            })
        }

        //初始化图表
        var myCharts = echarts.init($("#myCharts").get(0));
        var option = {
            title: {
                text: "全国疫情柱状图",
                subtext: "数据来源：国家卫键委"
            },

            legend: {
                data: ["新增确诊"]
            },
            tooltip: {
                trigger: "axis"
            },
            xAxis: {
                data: []
            },
            yAxis: {
                data: []
            },
            series: {
                name: "新增确诊",
                type: "bar",
                data: []
            }
        };
        myCharts.setOption(option);

        function fillToCharts(epidemics) {
            var provinces = [];
            var affirmedTotal = [];
            $.each(epidemics, function (index, epidemic) {
                provinces.push(epidemic.provinceName);
                affirmedTotal.push(epidemic.affirmedTotal);
            });
            myCharts.setOption({
                xAxis: {data: provinces},
                series: {
                    name: "新增确诊",
                    type: "bar",
                    data: affirmedTotal
                }
            });
        }

        //获取地图json数据
        var myMap1 = null;
        $.getJSON("${pageContext.request.contextPath}/Echarts/china.json", {}, function (chinaJson) {
            echarts.registerMap('china', chinaJson);
            var myMap = echarts.init($("#myMap").get(0));
            myMap1 = myMap;
            var option = {
                title: {
                    text: "全国疫情地图",
                    subtext: "数据来源：国家卫键委"
                },

                legend: {
                    data: ["累计确诊人数"]
                },
                tooltip: {},
                visualMap: {
                    type: 'piecewise',
                    min: 0,
                    max: 2000,
                    splitNumber: 5,
                    textStyle: {
                        color: "red"
                    }
                },
                series: [{
                    name: "累计确诊人数",
                    type: "map",
                    mapType: "china",
                    showLegendSymbol:false,
                    data: []
                }]
            };
            myMap.setOption(option);
        }, "json");


        function fillToMap(epidemics) {
            var data=[];
            $.each(epidemics, function (index, epidemic) {
                var obj = {};
                obj.name = epidemic.provinceName;
                obj.value = epidemic.affirmedTotal;
                data.push(obj);
            });
            console.info(data);
            myMap1.setOption({
                series:[{
                    data:data
                }]
            });
        }
    })

</script>

</body>
</html>
